<!-- src/components/SignaturePad.vue -->
<template>
	<div>
		<el-card class="signature-container" body-style="padding:0px">
			<vue-esign
				ref="esign"
				:is-crop="isCrop"
				:width="width"
				:height="height"
				:line-width="lineWidth"
				:line-color="lineColor"
			></vue-esign>
			<div class="control-container">
				<el-button type="danger" @click="handleReset">{{ resetText }}</el-button>
				<el-button type="primary" @click="handleGenerate">{{ generateText }}</el-button>
			</div>
		</el-card>

		<!-- 签名结果展示区域 -->
		<el-card v-if="showPreview" class="preview-card">
			<div class="clearfix">
				<span>{{ previewTitle }}</span>
			</div>
			<div class="preview-content">
				<img v-if="resultImg" :src="resultImg" class="preview-img">
				<div v-else class="preview-placeholder">{{ previewPlaceholder }}</div>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'SignaturePad',
	props: {
		// 基础配置
		width: { type: Number, default: 900 },
		height: { type: Number, default: 300 },
		// 文本定制
		resetText: { type: String, default: '清空画板' },
		generateText: { type: String, default: '生成签名' },
		previewTitle: { type: String, default: '请确认签名' },
		previewPlaceholder: { type: String, default: '请在下方书写电子签名' },

		// 功能开关
		showPreview: { type: Boolean, default: true },
		autoUpload: { type: Boolean, default: false }
	},
	data() {
		return {
			lineWidth: 6,
			lineColor: '#000000',
			bgColor: '',
			resultImg: '',
			isCrop: false,
		}
	},
	methods: {
		// 清空画板
		handleReset() {
			console.log('清空画板')
			this.$refs.esign.reset()
			this.resultImg = ''
			this.$emit('reset')
		},

		// 生成签名图片
		handleGenerate() {
			this.$refs.esign.generate()
				.then(res => {
					let randnum = Math.random() * 10000000000000
					randnum = Math.floor(randnum)
					const file = this.dataURLtoFile(res,  "dianziqianming/"+randnum+'.png')
					this.resultImg = res

					// 触发保存事件
					this.$emit('save', {
						base64: res,
						file: file,
						timestamp: Date.now()
					})

					// 自动上传逻辑（可选）
					// if (this.autoUpload) {
					// 	this.uploadFile(file)
					// }
				})
				.catch(err => {
					this.$emit('error', '请签名之后提交！')
				})
		},

		// Base64转File对象
		dataURLtoFile(dataurl, filename) {
			var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
			while(n--){
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([u8arr], filename, {type:mime});
		},

		// 内置上传方法（可选）
		uploadFile(file) {
			const formData = new FormData()
			formData.append('file', file)
			formData.append('code', 101)

			this.$API.office.personalFinance.uploadFileByCode.post(formData)
				.then(res => {
					this.$emit('upload-success', res)
				})
				.catch(err => {
					this.$emit('upload-error', err)
				})
		}
	}
}
</script>

<style scoped>
.signature-container {
	margin-bottom: 20px;
}

.control-container {
	padding: 15px;
	text-align: center;
}

.preview-card {
	margin-top: 20px;
}

.preview-img {
	max-width: 100%;
	height: auto;
}

.preview-placeholder {
	color: #999;
	padding: 20px;
	text-align: center;
}
</style>
